<template>
	<view class="main_money">
		<view class="main_money_bgBox">
			<uni-forms ref="formRef" label-width="150" :model="withdrawMobileVo">
				<view class="item_fee">
					<uni-forms-item label="选择银行" name="bankNo" >
						<view class="item_content">
							<uni-data-select style="width: 100%;" v-model="withdrawMobileVo.bankNo"
								@change="changeBankNo" :clear="false" :localdata="bankCardListSelectList" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="银行卡号" >
						<view class="item_content"><span class="content_name">{{withdrawMobileVo.bankNo}}<span
									style="color: #999;font-weight: 500;"
									v-if="!withdrawMobileVo.bankNo">根据银行卡获取</span></span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="收款人姓名" >
						<view class="item_content"><span class="content_name">{{withdrawMobileVo.cardholderName}}<span
									style="color: #999;font-weight: 500;"
									v-if="!withdrawMobileVo.cardholderName">根据银行卡获取</span></span>
						</view>
					</uni-forms-item>
				</view>
				<view class="item_fee">
					<uni-forms-item label="工单数量">
						<view class="item_content"><span
								class="content_name">{{withdrawMobileVo.orderVos.length}}</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="总工单金额">
						<view class="item_content"><span class="content_name">￥{{totalMoney.toFixed((2))}}</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="手续费方式">
						<view class="item_content"><span
								class="content_name">{{`${withdrawMobileVo.withdrawHandlingFeeStrategy == 1?'按总单结算金额的'+(withdrawMobileVo.handingFeeProportion)+'%':'按每单'+withdrawMobileVo.handingFeeFixedOrder+'元'}`}}</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="总手续费">
						<view class="item_content"><span class="content_name">￥{{(costTotal)}}</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="到账金额">
						<view class="item_content"><span
								class="content_name">￥{{(totalWithdrawMoney||0).toFixed(2)}}</span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="">
						<span style="color: #000;font-size:28rpx;">申请备注</span>
						<view class="text_input">
							<uni-easyinput type="textarea" v-model="withdrawMobileVo.applyRemark" :inputBorder="false"
								placeholderStyle="font-size:14px;" :maxlength="50"
								placeholder="请填写申请备注"></uni-easyinput>
							<view class="coun">
								{{0}}/50
							</view>
						</view>
					</uni-forms-item>
				</view>
				<view class="item_fee">
					<view class="item_fee_tableHead" @click="showOrder">
						已选工单({{withdrawMobileVo.orderVos.length}})<span :class="isShow? 'down_up_':'down_up'"></span>
					</view>
					<view class="order_sele_info" v-if="!isShow">
						<view class="order_sele_info_item" v-for="item in withdrawMobileVo.orderVos" :key="item.id">
							<view class="order_info_item">
								<view class="content_info">
									<span class="label">工单单号：</span>
									<span class="value" @click="goDetail(item.workId)"
										style="color: #007cff;">{{item.workNo}}</span>
								</view>
								<view class="content_info">
									<span class="label">工单金额：</span>
									<span class="value"
										style="font-weight: bold;">￥{{(item.oldWithdrawMoney||0).toFixed(2)}}</span>
								</view>
								<view class="content_info">
									<span class="label">实际到账：</span>
									<span class="value"
										style="font-weight: bold;">￥{{(item.withdrawMoney||0).toFixed(2)}}</span>
								</view>
								<view class="content_info">
									<span class="label">工程师名称：</span>
									<span class="value">{{item.engineer || ''}}</span>
								</view>
								<view class="content_info">
									<span class="label">工程师手机号：</span>
									<span class="value">{{item.engineerPhone || ''}}</span>
								</view>
							</view>
							<view class="order_info_item">
								<view class="content_info">
									<span>手续费：</span><span style="font-weight: bold;">￥{{item.money.toFixed(2)}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-forms>
		</view>
		<view class="footer_order">
			<view v-if="totalWithdrawMoney>=0" class="footer_order_right" 
				@click="submitFun">
				<view class="btn">提交</view>
			</view>
			<view v-else class="footer_order_right btn_">
				<view class="btn">提交(总工单金额≥总手续费)</view>
			</view>

		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import _ from "lodash"
	import store from '@/store_network/index.js'
	import { onUnload, onLoad } from '@dcloudio/uni-app'
	import apiAccount from '@/util/network_api/account.js'
	const formRef = ref()
	onLoad(async (e) => {
		getNetworkEmpBandSelect()
		getNetworkWithdrawHandlingFeeStrategy()
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 张开显示
	const isShow = ref(true)
	const showOrder = () => {
		isShow.value = !isShow.value
	}
	const withdrawMobileVo = ref({
		"applyNetworkEmp": "",//申请人名称
		"applyNetworkEmpId": '',//申请人ID，即服务人员ID
		"applyNetworkId": '',//服务商ID
		"applyRemark": "",//申请备注
		"bankNo": "",//银行卡号
		"cardholderName": "",//	持卡人姓名
		"handingFeeFixedOrder": 0,//每单固定手续费：当withdrawHandlingFeeStrategy=2时生效
		"handingFeeProportion": 0,//手续费比例，单位为%，当withdrawHandlingFeeStrategy=1时生效
		"id": '',
		"name": "",//银行卡名称
		"openingBank": "",//开户行
		"orderVos": [
			// {
			// 	"id": '',//
			// 	"oldWithdrawMoney": 0,//旧结算金额
			// 	"remark": "",
			// 	"withdrawMoney": 0,//结算金额
			// 	"workId": '',
			// 	"workNo": ""//工单单号
			// }
		],
		"withdrawHandlingFeeStrategy": 1//结算手续费策略：1-按比例收取(按结算总金额计算)，2-每间固定(按每单总金额计算),示例值(1)
	})
	// 总手续费
	const costTotal = ref('')
	// 获取手续费策略
	const totalMoney = ref(0)//总工单金额
	const totalWithdrawMoney = ref(0)//总到账工单金额
	const getNetworkWithdrawHandlingFeeStrategy = () => {
		apiAccount.getNetworkWithdrawHandlingFeeStrategy().then(res => {
			if (res.code == 20000) {
				withdrawMobileVo.value.withdrawHandlingFeeStrategy = res.data.row.withdrawHandlingFeeStrategy
				withdrawMobileVo.value.handingFeeFixedOrder = res.data.row.handingFeeFixedOrder
				withdrawMobileVo.value.handingFeeProportion = res.data.row.handingFeeProportion


				totalMoney.value = 0
				totalWithdrawMoney.value = 0
				withdrawMobileVo.value.orderVos = store.state.orderVos.map(o => {
					let money = 0
					if (withdrawMobileVo.value.withdrawHandlingFeeStrategy == 1) {
						money = Number(withdrawMobileVo.value.handingFeeProportion * 0.01 * o.totalPrice || 0)
					} else {
						money = withdrawMobileVo.value.handingFeeFixedOrder
					}
					totalMoney.value = Number(o.totalPrice) + totalMoney.value//总工单金额
					totalWithdrawMoney.value = Number((o.totalPrice - money + totalWithdrawMoney.value).toFixed(2))//总到账工单金额
					return {
						"id": '',
						"oldWithdrawMoney": o.totalPrice || 0,//旧结算金额
						"remark": "",
						money: money,
						"withdrawMoney": parseFloat((o.totalPrice - money).toFixed(2)),//结算金额
						"workId": o.id,
						"workNo": o.workNo,//工单单号
						engineer: o.engineer, // 工程师
						engineerPhone: o.engineerPhone, // 工程师手机号
					}
				})
				costTotal.value = withdrawMobileVo.value.withdrawHandlingFeeStrategy == 1 ?
					(withdrawMobileVo.value.handingFeeProportion * 0.01 * totalMoney.value).toFixed(2) :
					(withdrawMobileVo.value.handingFeeFixedOrder * withdrawMobileVo.value.orderVos.length).toFixed(2)
			}
		})
	}
	// 获取银行卡下拉
	const bankCardListSelectList = ref([])
	const getNetworkEmpBandSelect = () => {
		apiAccount.getNetworkEmpBandSelect().then(res => {
			if (res.code == 20000) {
				bankCardListSelectList.value = res.data.rows.map(o => {
					let text = o.name.length > 10 ? o.name.slice(0, 10) + '...' + `(${o.code.slice(-4)})` : `${o.name}(${o.code.slice(-4)})`
					return {
						id: o.id,
						text: text,
						value: o.code,
						name: o.name,
						cardholderName: o.cardholderName
					}
				})
			}
		})
	}
	// 银行卡号选择变化
	const changeBankNo = (bankNo : string) => {
		bankCardListSelectList.value.filter(o => {
			if (o.value == bankNo) {
				withdrawMobileVo.value.name = o.name
				withdrawMobileVo.value.cardholderName = o.cardholderName
			}
		})
	}

	// 提交
	const submitFun = _.debounce(async () => {
		await formRef.value.validate().then(async res => {
			uni.showLoading({
				title: '加载中...',
				mask:true
			})
			let dataObj = _.cloneDeep(withdrawMobileVo.value)
			dataObj.orderVos = dataObj.orderVos.map(o => {
				o.withdrawMoney = o.oldWithdrawMoney
				return o
			})
			await apiAccount.saveWithdraw(dataObj).then(res => {
				if (res.code == 20000) {
					uni.hideLoading()
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					store.commit('set_orderVos', [])
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages_network/home/myAccount/withdrawalLog'
						})
					}, 800)
				}
			})
			uni.hideLoading()
		}).catch(err => { })

	}, 700,{leading:false})
	const goDetail = (id) => {
		uni.navigateTo({
			url: "/pages_network/order/detail?workId=" + id
		})
	}
</script>

<style lang="scss" scoped>
	.main_money {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100%;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: auto;

		&_bgBox {
			margin: 24rpx;
			padding-bottom: 10vh;

			.info_base {
				background-color: #fff;
				padding: 24rpx;
				margin-bottom: 24rpx;
			}

			.item_fee {
				background-color: #fff;
				padding: 24rpx;
				margin-bottom: 24rpx;

				:deep(.uni-forms-item) {
					margin-bottom: 20rpx;
					border-bottom: 1px solid #eee;
					.uni-forms-item__label{
						color: #000;
						font-size: 28rpx;
					}
				}

				:deep(.uni-select) {
					border: none;
					width: 100%;

					.uni-select__input-placeholder {
						text-align: right;
						margin-right: 12rpx;
						font-size: 14px;
						color: #999;
						font-weight: 500 !important;

					}

					.uni-select__input-text {
						text-align: right;
						margin-right: 12rpx;
						font-weight: bold;
					}

					.uni-popper__arrow {
						left: 76%;
					}

					.uni-select__selector {
						top: 100%;
						left: 20%;
						max-width: 80%;
					}
				}

				&_tableHead {
					display: flex;
					align-items: center;
					// margin: 24rpx 0 0;
					font-weight: bold;
					font-size: 28rpx;

					.down_up {
						width: 0;
						height: 0;
						border-right: 10rpx solid transparent;
						border-left: 10rpx solid transparent;
						border-top: 12rpx solid #000;
						margin-left: 4rpx;
						margin-top: 4rpx;
					}

					.down_up_ {
						width: 0;
						height: 0;
						border-right: 10rpx solid transparent;
						border-left: 10rpx solid transparent;
						border-bottom: 12rpx solid #000;
						margin-left: 4rpx;
						margin-top: 4rpx;
					}
				}

				.order_sele_info {
					&_item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;

						.order_info_item {
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							padding: 12rpx 0;
							row-gap: 5px;

							.content_info {
								display: flex;

								.label {
									// width: 196rpx;
									text-align: right;
								}

								.value {
									width: 240rpx;
								}
							}
						}
					}

					.order_sele_info_item~.order_sele_info_item {
						border-top: 2rpx solid #eee;
					}
				}

				.item_content {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					height: 100%;
					width: 100%;

					:deep(.checklist-box) {
						margin-left: 40rpx;
						margin-right: 0;
					}

					.input_pl {
						color: #999;
						width: 100rpx;
						font-size: 28rpx
					}

					.content_name {
						flex: 1;
						text-align: right;
						width: 300rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						margin-right: 12rpx;
						font-weight: bold;
					}

					:deep(.input_with) {
						.uni-easyinput__content {
							width: 180rpx !important;
						}
					}
				}

				.text_input {
					margin: 10rpx 0 0;
					position: relative;

					:deep(.uni-easyinput__content-textarea) {
						margin: 0;
						// background-color: #fff !important;
					}

					padding: 12rpx 12rpx 24rpx;
					background-color:#fff;
					border: 1rpx solid rgb(243, 244, 248);
					border-bottom: none;

					.coun {
						font-size: 22rpx;
						position: absolute;
						right: 12rpx;
						bottom: 6rpx;
						color: #999;
					}
				}
			}
		}

		.footer_order {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			z-index: 99;
			height: 150rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 48rpx;
			box-sizing: border-box;
			border-top: 1rpx solid rgba(177, 177, 177, 0.1);

			&_right {
				flex: 1;
				border-radius: 45rpx;
				height: 80rpx;
				background-color: #007cff;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
			}

			.btn_ {
				background-color: #007cffa0;
			}
		}
	}
</style>